@font-face {
  font-family: 'ms sans serif';
  src: local(''), url('https://hhroses.art/font/ms-sans-serif-1.otf') format('OpenType');
  font-display: swap;
}
body,html{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  font-family:'ms sans serif', Arial, Times;
  cursor:url('https://hhroses.art/cursors/default.png'),auto;
}
body { 
  text-align:center;
  color:black;
  overflow:auto;
  background:#d8d9ed;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  overflow-x: hidden;
}
.container {
  margin: 0 !important; 
  padding: 20px 0 0 0 !important;  
  min-height: 100dvh;
  width: 100%;
  display: flex !important;
  flex-direction: column !important; 
  align-items: center !important;  
  justify-content: flex-start !important; 
  box-sizing: border-box; 
}
h1 {
  font-size:24px; 
  font-family:Times;
  overflow-wrap: break-word;
  word-wrap: break-word;
  text-shadow: 1px 1px 0 rgba(0,0,0,.3),
   1px 1px 0 rgba(0,0,0,.2), 
   100px 10px 0 rgba(0,0,0,.2),
   -50px -10px 0 rgba(0, 0, 255,.25);
  cursor: url('https://hhroses.art/cursors/help.png'), help;
}
h1:hover {
  text-shadow: 7px 6px 0 rgba(0,0,0,.3),
   100px 1px 0 rgba(0,0,0,.2), 
   3px 50px 0 rgba(0,0,0,.2),
   -70px -10px 0 rgba(0, 0, 255,.25);
  animation: shake 90s infinite;
}
h1:active {
  text-shadow: 10px -10px 0 rgba(0,0,0,.3),
   -20px 20px 0 rgba(0,0,0,.2), 
   -9px 3px 0 rgba(0,0,0,.2),
   5px 5px 0 rgba(0, 0, 255,.25);
}
@keyframes shake { 
  0% {transform:translateX(0px) translateY(0px);}
  10% {transform:translateX(2px) translateY(-3px);}
  20% {transform:translateX(-1px) translateY(0px);}
  30% {transform:translateX(0px) translateY(1px);}
  40% {transform:translateX(-3px) translateY(2px);}
  50% {transform:translateX(2px) translateY(5px);}
  60% {transform:translateX(5px) translateY(4px);}
  70% {transform:translateX(3px) translateY(1px);}
  80% {transform:translateX(0px) translateY(5px);}
  90% {transform:translateX(-5px) translateY(2px);}
  100% {transform:translateX(0px) translateY(0px);}
}
p {
  margin:10px auto;
  text-align: center;
  line-height:22px;
  width:450px;
  max-width:90%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  font-family:Arial;
  font-size:18px;
  cursor: url('https://hhroses.art/cursors/help.png'), help;
  text-align:center;
} 
p:active {animation:shake .01s infinite}
img,.img {
  border:1px solid black;
  box-shadow: 1px 1px rgba(0,0,0,.5);
  width:500px;
  min-height:50px;
  height:auto;
  max-height:500px;
  max-width:90%;
  cursor: url('https://hhroses.art/cursors/help.png'), help;
  margin:0 auto;
  margin-top:0 !important;
  padding:0;
  background-size: 100% auto;
  box-sizing: border-box;
} 
button {
  background: #c3c3c3;
  border:none;
  padding:5px 10px;
  margin:5px;
  cursor:url('https://hhroses.art/cursors/pointer.png'), pointer;
  scale:1.5;
  min-width:30px;
} 



